<template>
  <div>
    <!-- <div class="toptitle">云店广告位列表</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="名称：">
        <el-input v-model="formInline.user" placeholder></el-input>
      </el-form-item>
      <el-form-item label="分类：">
        <el-select v-model="formInline.region1" clearable placeholder="请选择">
          <el-option label="全部" value></el-option>
          <el-option label="图片" value="1"></el-option>
          <el-option label="视频" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="type" label="分类">
        <template slot-scope="scope">
          <span v-if="scope.row.type==='1'">图片</span>
          <span v-if="scope.row.type==='2'">视频</span>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="排序"></el-table-column>
      <el-table-column align="center" prop="pictures" label="图片" width="100">
        <template slot-scope="scope">
          <img
            :src="scope.row.pictures[0].picUrl"
            v-if="scope.row.pictures.length>0"
            width="70"
            height="50"
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">{{scope.row.status===0?'禁用':'启用'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="350" align="left" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row)" type="primary" size="small" v-if="scope.row.status===0" >启用</el-button> -->
          <el-button size="mini" @click="edit(scope.row)" type="primary">编辑</el-button>
          <el-button
            @click="handledelete(scope.row)"
            type="danger"
            size="mini"
            v-if="scope.row.status===1"
          >删除</el-button>
          <!-- <el-button type="danger" size="small" @click="handleClick(scope.row)" v-if="scope.row.status===1&&scope.row.type===2" >禁用</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="信息" :visible.sync="dialogVisible" width="40%">
      <el-form :model="adsenseForm" :rules="rules" ref="adsenseForm" label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="adsenseForm.name"></el-input>
        </el-form-item>

        <el-form-item label="分类">
          <el-select v-model="adsenseForm.region" placeholder="请选择分类">
            <el-option label="图片" value="1"></el-option>
            <el-option label="视频" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="adsenseForm.number"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="adsenseForm.state">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图片/视频" prop="mnemonicCode" class="label_edit">
          <el-upload
            class="upload-demo"
            action="http://mt.wssaa.com/api/file-service/v1/file/uploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList2"
            :on-success="upLoadPic"
            :headers="headers"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传图片/视频文件，且不超过2M</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="说明">
          <el-input type="textarea" v-model="adsenseForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleone = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="sure()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCarouselPic,
  usebutton,
  rolemanagetwo,
  addrole,
  deleterole,
  updaterole,
  createInfo
} from "@/api/adsense";
import qs from "qs";

export default {
  data() {
    return {
      data: [],
      loading: false,
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      btnarr: [],
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {},
      adsenseForm: {
        name: "",
        number: "",
        region: "",
        sec: "",
        desc: "",
        picUrl: [],

        state: ""
      },
      checkedarr: [],
      roleid: "",
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      formInline: {
        user: "",
        region1: ""
      },
      arrone: [],
      tableData: [
        {
          name: "优惠券",
          type: "1",
          number: "1",
          picUrl: [
            "https://obs-xinlingshoupingtai.obs.cn-north-4.myhuaweicloud.com:443/2020%2F20200402%2F7eb5fa06-318f-4077-8f72-ef44a2ecc2a2.jfif"
          ],
          status: 1
        }
      ],
      fileList2: [],
      headers: {
        token: localStorage.getItem("token") //从cookie里获取token，并赋值  Authorization ，而不是token
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        region: [{ required: true, message: "请选择分类", trigger: "blur" }],
        state: [{ required: true, message: "请选择状态", trigger: "change" }]
      }
    };
  },

  mounted() {
    this.getCarouselPic();
  },
  methods: {
    kong() {
      this.formInline.user = "";
      this.formInline.region1 = "";
    },

    search() {
      let data = {
        name: this.formInline.user,
        type: this.formInline.region1
      };

      //  };
      getCarouselPic(data).then(res => {
        this.tableData = res.records;
      });
    },

    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      this.arrid = [];
      this.btnarr = [];
      res.forEach(item => {
        // arr.push(item.id);
        // console.log(item, "ll2tt");
        if (item.resourceLevel == null) {
          this.btnarr.push(item.id);
          console.log(this.btnarr, "ll2ee");
        } else {
          this.arrid.push(item.id);
          //   this.arrone = arr;
          console.log(this.arrid, "ll2");
        }
      });
    },

    handledelete(v) {
      this.roleid = v.roleId;

      //   this.dialogVisibleone = true;
      let data = {
        roleId: this.roleid
      };
      this.$confirm("确认删除吗？").then(_ => {
        deleterole(qs.stringify(data)).then(res => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.getCarouselPic();
          this.dialogVisibleone = false;
        });
      });
    },

    add() {
      //数据置空
      this.fileList2 = [];
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
    },
    edit(v) {
      this.fileList2 = [];
      let picUrl = v.picUrl;
      if (picUrl.length > 0) {
        picUrl.forEach((item, i) => {
          var picUrl = item;

          var aa = picUrl.substring(index - 5, picUrl.length);
          var name = item.name;
          let data = {
            name: aa,
            picUrl: picUrl
          };
          this.fileList2.push(data);
        });
      }
      this.adsenseForm.name = v.name;
      this.adsenseForm.region = String(v.type);
      console.log(typeof v.type, "oioi");
      this.adsenseForm.sec = v.comments;
      this.adsenseForm.desc = v.desc;
      this.adsenseForm.picUrl = picUrl;
      this.adsenseForm.state = String(v.status);
      console.log(v, "pp");
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
    },
    confirmEdit(v) {
      console.log(v, "ff");
      if (this.adsenseForm.name == "" || this.adsenseForm.name == null) {
        this.$message.error("请输入名称");
        return;
      }
      if (this.adsenseForm.region == "" || this.adsenseForm.region == null) {
        this.$message.error("请输入分类");
        return;
      }
      if (this.adsenseForm.state == "" || this.adsenseForm.state == null) {
        this.$message.error("请选择状态");
        return;
      }
      if (this.editflag) {
        //   var u1 = "u1";

        var userId = localStorage.getItem("userId");
        let picUrl = [];
        this.fileList2.forEach((item, i) => {
          let data = {
            picUrl: item.picUrl
          };
          picUrl.push(data);
        });
        let data = {
          roleId: "",
          name: this.adsenseForm.name,
          type: this.adsenseForm.region,
          number: this.adsenseForm.number,
          desc: this.adsenseForm.desc,
          picUrl: picUrl,
          status: this.adsenseForm.status,
          createUser: userId
        };
        addrole(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.getCarouselPic();
        });
      } else {
        //var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          roleId: this.adsenseForm.roleId,
          name: this.adsenseForm.name,
          type: this.adsenseForm.region,
          number: this.adsenseForm.number,
          desc: this.adsenseForm.desc,
          status: this.adsenseForm.status,
          createUser: userId,
          picUrl: picUrl
        };
        updaterole(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.getCarouselPic();
        });
      }
    },

    handleClick(v) {
      if (v.status === 0) {
        var uuid = 1;
      } else if (v.status === 1) {
        var uuid = 0;
      }
      let data = { roleId: v.roleId, status: uuid };
      usebutton(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.getCarouselPic();
      });
    },
    getCarouselPic() {
      getCarouselPic({}).then(res => {
        (this.loading = false), (this.tableData = res.records);
        console.log(res, "ppe");
      });
    },

    onSubmit() {
      console.log(this.arrid, this.btnarr, "pfl");
      let data = {
        roleId: this.roleId
      };
      createInfo(data).then(res => {
        this.$message({
          showClose: true,
          message: "新增成功",
          type: "success"
        });
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.dialogVisibletwo = false;
      });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let newfileList = [];
      fileList.forEach((item, i) => {
        let data = {
          name: item.name,
          picUrl: item.picUrl
        };
        newfileList.push(data);
      });
      this.fileList2 = newfileList;
    },
    //预览图片
    handlePreview(file) {
      this.dialogImageUrl = file.picUrl;
      this.dialogVisibleImg = true;
    },

    upLoadPic(file, fileList) {
      var picUrl = file.result;
      var name = fileList.name;
      let data = {
        name: name,
        picUrl: picUrl
      };
      this.fileList2.push(data);
    },

    confirmEdit(formName) {
      console.log(this.fileList2);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitForm();
        } else {
          alert("请输入必填项!");
          return false;
        }
      });
    }
  }
};
</script>
<style  lang="less" scoped>
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 25px;
}
</style>